<template>
    <div> Emit选项 - {{ title }}</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, toRef } from 'vue'

export default defineComponent({
    // 移除.native修饰符
    // 原生事件的绑定如果不存在于emit选项中，则视为原生事件，否则为组件传递事件
    // Vue3约定组件事件参数以on开头
    // 强烈建议：所有通过emit触发的事件都在emit选项中定义
    // emits: [],
    // emits: ['onHandleClick'],
    // model: {
    //     props: 'modelValue', // 默认值 value ->modelValue
    //     event: 'update:modelValue' // 默认值 input -> update:modelValue
    // },
    emits: ['click', 'onHandleClick', 'update:title'],
    props: ['title'],
    setup(props, { emit }) {
        // 移除v-bind:[attrName].sync 双向绑定方法，新增自定义v-model
        onMounted(() => {
            setTimeout(() => {
                emit('update:title', 'Hello .Sync')
            }, 1000);
        })
        return {
            title: toRef(props, 'title')
        }
    }
})
</script>
